<template>
  <div class="chat-container">
    <div class="message" v-for="(msg, index) in messages" :key="index">
      <!-- 用户头像和消息 -->
      <div class="avatar">
        <img :src="msg.avatar" alt="avatar" />
      </div>
      <div class="message-content">
        <div class="message-header">
          <span class="name">{{ msg.name }}</span>
          <span class="timestamp">{{ msg.timestamp }}</span>
        </div>
        <div class="message-body">
          <div class="speech-icon" v-if="msg.isSpeech">
            <i class="icon-voice"></i>
          </div>
          <p>{{ msg.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          name: 'AD',
          avatar: 'https://via.placeholder.com/40', // 用户头像 URL
          timestamp: '29“',
          text: 'AD: 您好，这里是上海市公安局普陀区反诈骗中心...',
          isSpeech: true,
        },
        {
          name: '用户',
          avatar: 'https://via.placeholder.com/40', // 用户头像 URL
          timestamp: '10“',
          text: '请立刻停止相关操作！这很可能是虚假投资诈骗。',
          isSpeech: false,
        },
        {
          name: 'AD',
          avatar: 'https://via.placeholder.com/40', // 用户头像 URL
          timestamp: '4“',
          text: '是的，最近又有人打电话让我进群学习黄金投资。',
          isSpeech: false,
        }
      ]
    };
  }
};
</script>

<style lang="stylus" scoped>
.chat-container
  display: flex
  flex-direction: column
  margin: 20px

.message
  display: flex
  margin-bottom: 15px
  align-items: flex-start
  max-width: 80%
  
  &:nth-child(odd)
    align-self: flex-end

.message-content
  max-width: 400px
  padding: 10px
  border-radius: 10px
  background-color: #2b2b2b
  position: relative
  font-size: 14px
  color: #fff
  
  &.system
    background-color: #3e3e3e
  .message-header
    display: flex
    justify-content: space-between
    font-size: 12px
    color: #bbb
  .message-body
    display: flex
    align-items: center
    font-size: 14px

  .speech-icon
    margin-right: 10px
    font-size: 18px
    color: #00bcd4

.avatar
  margin-right: 10px
  img
    border-radius: 50%
    width: 40px
    height: 40px
